<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/upload.css">
    <title>手机上传文件</title>
</head>

<body>
    <div class="container">
        <h1>📱 上传打印文件</h1>

        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">📄</div>
            <p>点击选择文件或拖拽文件到这里</p>
            <p style="font-size: 12px; color: #7f8c8d; margin-top: 10px;">
                支持格式: PDF, DOC, DOCX, JPG, PNG, TXT<br>
                最大大小: 10MB
            </p>
        </div>

        <input type="file" id="fileInput" class="file-input" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.txt">

        <div class="file-info" id="fileInfo">
            <strong>已选择文件:</strong>
            <span id="fileName"></span>
            <br>
            <span id="fileSize"></span>
        </div>

        <button class="upload-btn" id="uploadBtn" disabled>开始上传</button>
        <!--   目前是上传自动打印   display: none  -->
        <button class="upload-btn" id="printBtn" disabled style="display: none">打印</button>

        <div class="status" id="statusMessage"></div>

        <div class="loading" id="loading">
            <p>正在上传中...</p>
        </div>

        <a href="/" class="back-btn">返回电脑端</a>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const uploadBtn = document.getElementById('uploadBtn');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const statusMessage = document.getElementById('statusMessage');
        const loading = document.getElementById('loading');
        const printBtn = document.getElementById('printBtn');


        let selectedFile = null;
        let uploadDone = false;

        // 点击上传区域触发文件选择
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        // 拖拽功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.background = '#e8f4fc';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.background = '';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.background = '';

            if (e.dataTransfer.files.length > 0) {
                handleFileSelect(e.dataTransfer.files[0]);
            }
        });

        // 文件选择处理
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });

        function handleFileSelect(file) {
            // 检查文件类型
            const validTypes = [
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'image/jpeg',
                'image/png',
                'text/plain'
            ];

            const fileExtension = file.name.split('.').pop().toLowerCase();
            const validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'txt'];

            if (!validExtensions.includes(fileExtension)) {
                showStatus('错误: 不支持的文件格式', 'error');
                return;
            }

            // 检查文件大小 (10MB)
            if (file.size > 10 * 1024 * 1024) {
                showStatus('错误: 文件大小超过10MB限制', 'error');
                return;
            }

            selectedFile = file;

            // 显示文件信息
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileInfo.style.display = 'block';

            // 启用上传按钮
            uploadBtn.disabled = false;

            // 隐藏之前的状态消息
            hideStatus();
        }

        // 上传文件
        uploadBtn.addEventListener('click', async () => {
            if (!selectedFile) return;

            loading.style.display = 'block';
            uploadBtn.disabled = true;
            hideStatus();

            const formData = new FormData();
            formData.append('file', selectedFile);

            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });

                // 检查响应状态
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '上传失败');
                }

                const result = await response.json();
                showStatus(`成功: ${result.message}`, 'success');

                // 清空选择
                selectedFile = null;
                fileInput.value = '';
                fileInfo.style.display = 'none';
                uploadBtn.disabled = true;
                printBtn.disabled = false;

            } catch (error) {
                console.error('上传错误:', error);
                showStatus(`错误: ${error.message}`, 'error');
                uploadBtn.disabled = false;
            } finally {
                loading.style.display = 'none';
            }
        });

        printBtn.addEventListener('click', async () => {
            if (!uploadDone) return;
            loading.style.display = 'block';
            printBtn.disabled = true;
            fetch('/print', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    filename: filename,
                })
            })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw new Error(err.error || '打印失败: HTTP ' + response.status)
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('打印响应:', data);
                    showNotification(data.message || '打印任务已发送');
                })
                .catch(error => {
                    console.error('打印错误详情:', error);
                    showNotification('打印失败: ' + error.message, 'error');
                    // 重新启用按钮
                    if (printBtn) printBtn.disabled = false;
                });

        })

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        function showStatus(message, type) {
            statusMessage.textContent = message;
            statusMessage.className = `status ${type}`;
            statusMessage.style.display = 'block';
        }

        function hideStatus() {
            statusMessage.style.display = 'none';
        }

        // 检测是否为移动设备
        function isMobileDevice() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        // 如果是电脑访问移动页面，提示用户
        if (!isMobileDevice()) {
            showStatus('提示: 这是手机上传页面，建议使用手机扫描二维码访问', 'success');
        }
    </script>
</body>

</html>